<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>Document</title>
		<style type="text/css">
		*{margin:0;padding:0;font:14px;}
		ul{list-style:none;height: 50px;border-bottom: 5px solid #F60;padding-left: 30px}
		li{float: left;margin-top: 20px}
		a{text-decoration: none;display: block;height: 30px;line-height: 30px;width: 100px;background-color: #ccc;margin-bottom: 1px;text-align: center;}
		a:hover{color: #fff;background-color: #F60;height: 40px;line-height: 40px;margin-top: -10px;}
		</style>
		<script type="text/javascript" href="js/jquery-1.2.6.min.js"></script>
		<script type="text/javascript">
		$(function () {
			$("a").hover(
				function(){
					$(this).animate({
						"width": "160px"},300);
				},
				function(){
					$(this).animate({
						"width": "120px"},300);
				}
				)
		})
		</script>
		<!--<script type="text/javascript">
		window.onload=function () {
				var	aA=document.getElementsByTagName('a');
			for (var i = 0; i < aA.length; i++) {
				aA[i].onmouseover =function () {
					clearInterval(this.time);
					var This=this;
					This.time=setInterval(function () {
						This.style.width=This.offsetWidth+8+"px";
						if (This.offsetWidth>=120) {
							clearInterval(This.time);
						}
					},30)
				}
				aA[i].onmouseout =function () {
					clearInterval(this.time);
					var This=this;
					This.time=setInterval(function () {
						This.style.width=This.offsetWidth-8+"px";
						if (This.offsetWidth<=120) {
							This.style.width="120px";
							clearInterval(This.time);
						}
					},30)
				}

			}
		}
		</script>--> 
	</head>
	<body>
		<ul class="nav">
			<li><a href="#">首    页</a></li>
			<li><a href="#">新闻快讯</a></li>
			<li><a href="#">产品展示</a></li>
			<li><a href="#">售后服务</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
	</body>
</html>